<template>
  <div class="load_analysis">
    <div class="chart_box">
      <div ref="myChart" class="chart_wrapper"></div>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  name: 'LoadAnalysis',
  data() {
    return {
      isLoading: false, // 加载
      xData: [], // x轴
      yData: [], // 花费工时
    }
  },
  computed: {
    // 图表数据
    listData() {
      return this.$store.state.workshopSummary.listData || []
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新
    refresh() {
      this.init()
    },
    // 初始化方法
    init() {
      this.isLoading = true
      let postData = {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/workcentermessgeoverview',
        data: {
          beginCurrentWeekDate: this.moment(window.serverTime).startOf('week').format('YYYY-MM-DD 00:00:00'),
          endCurrentWeekDate: this.moment(window.serverTime).endOf('week').format('YYYY-MM-DD 23:59:59'),
        },
        module: 'workshopSummary',
        state: 'listData'
      }
      this.$store.dispatch('saveData', postData).then(res => {
        // 初始化图表数据
        this.echartsData()
        // 设置图表滚动
        let dataZoom = [
          {
            // 滚动条
            type: 'slider',
            show: false,
            showDetail: false,
            start: 0,
            end: 100,
            bottom: 10,
            height: 16,
            handleStyle: {
              /*手柄的样式*/
              color: '#fff',
              borderWidth: 2,
              borderColor: '#a1b1c1'
            },
          }
        ]
        let max = 5
        if (res.length >= max) {
          let end = Math.floor(max / res.length * 100)
          dataZoom.forEach(item => {
            item.end = end
            item.show = true
          })
        }
        this.drawLine(dataZoom)
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 图表所需数据
    echartsData() {
      // 获取花费工时按从大到小的规则排列
      this.yData = this.listData.wgroupWorkTimeList.reduce((pre, cur) => [...pre, cur.plannedTime], [])
      this.listData.wgroupWorkTimeList.forEach(item => {
        this.xData.push(item.wgroupName)
      })
    },
    // 绘制图表
    drawLine(dataZoom) {
      let myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none' // 指示器类型
          },
          padding: 10,
          textStyle: {
            fontSize: 12,
          },
          backgroundColor: 'rgba(0, 0, 0, 0.85)',
        },
        dataZoom: dataZoom, // 缩放,滚动
        grid: { // 画板边距
          left: '20%',
          right: '15%'
        },
        legend: {
          show: false,
          top: '10%'
        },
        yAxis: [{
          type: 'category',
          data: this.xData,
          // minInterval: 1,
          boundaryGap: ['20%', '20%'],
          inverse: true, // 数据反转
          axisLine: { // x轴轴线颜色和宽度
            lineStyle: {
              color: '#dcdfe6',
              width: 2
            }
          },
          axisLabel: { // x轴字体颜色
            show: true,
            textStyle: {
              color: 'rgba(0, 0, 0, 0.65)'
            }
          },
        }
        ],
        xAxis: [{
          type: 'value',
          barCategory: 20, //类目柱的间距
          splitLine: { // Y轴虚线
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)',
              width: 1,
              type: 'dashed'
            }
          },
          axisLine: {'show': false},
          axisTick: {'show': false},
          axisLabel: {
            // formatter: '{value} °C'
          },
        }
        ],
        // 数据
        series: [
          {
            name: '工时',
            type: 'bar',
            data: this.yData,
            barCategoryGap: '40%',
            position: 'inside',
            itemStyle: {
              normal: {
                color: '#1890ff',
                opacity: 0.85
              }
            }
          },
        ]
      })
    },
  }
}
</script>

<style scoped lang="less">
  .load_analysis {
    .chart_box {
      .chart_wrapper {
        width: 100%;
        height: 280px;
        margin-top: -10px;
        margin-bottom: -10px;
        box-sizing: border-box;
      }
    }
  }
</style>
